<template>
	<!-- <div style="margin: center;">
		<img src="../../public/images/001.jpg" width="200" height="100" alt="image" />
	</div>
	<div id="nav">
		123
	</div>
	<div class="row col-sm-2">
		<div id="id_001"></div>
		<div id="id_002 ">
			<img src="../../public/images/001.jpg" alt="image" />
		</div>

	</div> -->
	<div class="wrapper">
		<!-- 导航条 -->
		<div class="top-nav-wrap">
			<div class="top-nav">
				<div>导航条</div>
				<div>广告图</div>
			</div>
		</div>
		<!-- 搜索部分 -->
		<div class="search-wrap">
			<div class="search">
				<div>搜素部分</div>
			</div>
		</div>
		<!-- 主体部分 -->
		<div class="mian-wrap">
			<!-- 主体导航条部分 -->
			<div class="mian-nav">
				<div>主体导航条部分</div>
			</div>
			<!-- 主体部分 -->
			<div class="mian-box">
				<!-- 先两栏布局 -->
				<div class="mian">
					<div class="mian-inner">
						<div class="inner-lf">
							<div>主体分类栏</div>
						</div>
						<div class="inner-cer">
							<div>主体轮播图</div>
						</div>
						<div class="inner-rt">
							<div>主体右侧展示</div>
						</div>
					</div>
					<div class="mian-bottom">
						<div>主体底部信息</div>
					</div>
				</div>
				<div class="box-rt">
					<div class="member">
						<div>登录注册部分</div>
					</div>
					<div class="massage">
						<div>信息部分</div>
					</div>
					<div class="notice">
						<div>公告</div>
					</div>
					<div class="mobule">
						<div>图标</div>
					</div>
					<div class="app">
						<div>apps</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>




<style lang="scss">
	* {
		margin: 0;
		padding: 0;
	}

	html,
	body,
	#app {
		height: 100%;
		// background: rgba(38, 24, 49, .6);
	}

	div {
		color: #fff;
		font-size: 16px;
	}

	.wrapper {
		width: 100%;
		height: 100%;
	}

	/* 导航条部分 */
	.wrapper .top-nav-wrap {
		width: 100%;
		height: 105px;
	}

	.wrapper .top-nav {
		width: 1190px;
		height: 105px;
		margin: 0 auto;
		background-color: green;
		border: 1px solid #000;
	}

	/* 搜索部分 */
	.wrapper .search-wrap {
		width: 100%;
		height: 97px;
	}

	.wrapper .search {
		width: 1190px;
		height: 97px;
		background-color: #ff5500;
		margin: 0 auto;
		border: 1px solid #000;
	}

	/* 主体部分 */
	.wrapper .mian-wrap {
		width: 1190px;
		height: 663px;
		margin: 0 auto;
		border: 1px solid #000;
	}

	.wrapper .mian-wrap .mian-nav {
		width: 100%;
		height: 30px;
		background-color: green;
	}

	.wrapper .mian-wrap .mian-box .mian {
		width: 890px;
		height: 632px;
		float: left;
	}

	.mian-wrap .mian-box .mian .mian-inner {
		width: 890px;
		height: 522px;
		background-color: pink;
	}

	.mian-wrap .mian-box .mian .mian-inner .inner-lf {
		width: 190px;
		height: 100%;
		float: left;
		background-color: #ff5500;
	}

	.mian-wrap .mian-box .mian .mian-inner .inner-cer {
		width: 520px;
		height: 100%;
		float: left;
		border: 1px solid #000;
	}

	.mian-wrap .mian .mian-inner .inner-rt {
		padding: 0 8px;
		width: 160px;
		height: 100%;
		float: left;
		background-color: yellow;
	}

	.mian-wrap .mian .mian-bottom {
		width: 890px;
		height: 110px;
		background-color: purple;
	}

	.wrapper .mian-box .box-rt {
		width: 290px;
		height: 632px;
		float: left;
		margin-left: 8px;
		background-color: blue;
	}

	.wrapper .mian-box .box-rt .member {
		width: 290px;
		height: 132px;
		background-color: #ff5500;
	}

	.wrapper .mian-box .box-rt .massage {
		width: 290px;
		height: 26px;
		background-color: pink;
	}

	.wrapper .mian-box .box-rt .notice {
		width: 290px;
		height: 98px;
		padding-top: 10px;
		background-color: orange;
	}

	.wrapper .mian-box .box-rt .mobule {
		width: 290px;
		height: 230px;
		background-color: red;
	}
</style>
